<template>
<div class="MessageContent" @click="messageRead(comment.id)">
    <img :src="sender.avatar" alt="" class="user_img">
    <div style="margin-right: auto" >
        <p  class="sender">{{sender.username}}@ </p>
        <br>
        <p class="content">{{comment.message.split(":")[1]}}</p>
        <br>
        <p class="content" >回复内容:{{comment.message.split(":")[2]}}</p>
    </div>
        <span class="time">{{comment.dateTime}} </span>
    <span class="tishi" v-show="comment.state === 0">1</span>
    <span class="del" @click.stop="del">删除</span>
</div>
</template>

<script>
import api from "@/api";

export default {
    name: "MessageContent",
    props:["comment"],
    data(){
        return{
            info:0,
            kk:[1,2,3],
            sender:"",
        }
    },

    watch:{

        //如果发送人不为空则执行
        'comment.sender'(newVal,oldVal) {
            if(newVal!=='')
                api.saveSenderInfo(parseInt(newVal)).then((res)=> {
                    if(res.data.code === 200){
                        this.sender = res.data.data;
                    }
                })
        }
    },
    mounted() {
        if(this.comment.sender){
            //获取发送消息用户的信息
            setTimeout(()=>{
                api.saveSenderInfo(parseInt(this.comment.sender)).then((res)=> {
                    if(res.data.code === 200){
                        this.sender = res.data.data;
                    }
                })
            },200)


        }
    },
    methods:{
        messageRead(id){
            api.messageRead(id).then((res)=>{
                if(res.data.data === true){
                  this.comment.state = 1;
                    this.$emit("messages")
                }
                api.getByTitle(this.comment.message.split(":")[1]).then(res=>{
                    if(res.data.code === 200){
                        window.localStorage.setItem("essayInfo", JSON.stringify(res.data.data))
                        this.$router.push('/detail');
                    }
                })
            })

        },
       del(){
           this.$emit("messageDel",this.comment.id)
       }
    }
}
</script>

<style scoped>
.MessageContent{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
    padding: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    transition: all .2s;
    font-size: 14px;
}
 .user_img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}
 p{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    max-width: 50vw;
}
 p span{
    margin: auto;
}
.tishi{
    position: absolute;
    top: 3%;
    left: 0.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 18px;
    min-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: #ee4f4f;
    color: white;
}

.time{
    position: absolute;
    right: 0;
    top: 0;
    color: #8f8c8c;
    margin-left: auto;
}
.content{
    color: #8f8c8c;
    width: 25vw;

}
.sender{
   margin-bottom: 5px;
    font-size: 15px;
  max-width: 14vw;
}
.del{
    position: absolute;
    bottom: 1%;
    right: 1%;
    color: #8f8c8c;
}
.del:hover{
    opacity: 0.9;
    color: #3c8bda;
}
</style>